<template>
	<view>
		<view class="yhxinxz">
			<view class="zuobian">
				<image @click="gogonneng('ygxxwh')" class="yhtoux"
					:src="touxiang||sex==1?'../../static/touxn.png':sex==2?'../../static/touxv.png':'../../static/touxw.png'"
					mode="aspectFill"></image>
				<view class="yhneir">
					<view class="yonghum">{{name}}</view>
					<view class="zhiwu">
						{{dqjs==1?'员工':dqjs==2?'店长':dqjs==3?'区域经理':dqjs==4?'市级经理':dqjs==5?'老板':'超级管理员'}}
					</view>
				</view>
			</view>
			<view class="xxzx">
				<view @click="gogonggxx">
					<view class="tishi"></view>
					<image class="uimg" src="../../static/tzh.png"></image>
				</view>
				<image class="uimg" src="../../static/haomh.png" @click="goshaoma"></image>
			</view>
		</view>
		<view class="zhangmuyil">
			<view class="zongtouz">
				<view>总完成</view>
				<view class="shuzhi">{{census.zwanc}}</view>
			</view>
			<view class="zhyuer" v-if="dqjs<5">
				<view>当月完成</view>
				<view class="shuzhi">{{census.dywanc}}</view>
			</view>
			<view class="zongkz" v-if="dqjs<5">
				<view>当月任务</view>
				<view class="shuzhi">{{census.dyrenw}}</view>
			</view>
			<view class="zshouru">
				<view>完成量</view>
				<view class="shuzhi">
					{{census.dywanc==0&&census.dyrenw==0||census.dywanc!=0&&census.dyrenw==0?'0':census.dywanc/census.dyrenw}}%
				</view>
			</view>
		</view>
		<view class="gongnenglan">
			<view class="gonnb" v-if="dqjs==1" @click="gogonneng('../mypaidui/mypaidui')">
				<image class="gntub" src="../../static/mypaih.png"></image>
				<view>我的排队</view>
			</view>
			<view class="gonnb" v-if="dqjs==2" @click="gogonneng('../dianpaid/dianpaid')">
				<image class="gntub" src="../../static/dianpaih.png"></image>
				<view>门店排队</view>
			</view>
			<view class="gonnb" v-if="dqjs >= 2" @click="toStaff()">
				<image class=" gntub" src="../../static/ygguanl.png">
				</image>
				<view>员工管理</view>
			</view>
			<view class="gonnb" v-if="dqjs >2" @click="gogonneng('../mendiangl/mendiangl')">
				<image class="gntub" src="../../static/mdgul.png"></image>
				<view>门店管理</view>
			</view>
			<view class="gonnb" @click="goheting">
				<image class="gntub" src="../../static/hetong.png"></image>
				<view>合同管理</view>
			</view>
			<view class="gonnb" v-if="dqjs >2" @click="gogonneng('../yejiguanli/yejiguanli')">
				<image class="gntub" src="../../static/yeji.png"></image>
				<view>业绩管理</view>
			</view>
			<view class="gonnb" @click="dakakaoqin">
				<image class="gntub" src="../../static/kaoqin.png"></image>
				<view>考勤打卡</view>
			</view>
			<view class="gonnb" @click="gogonneng('../spguanli/spguanli')">
				<image class="gntub" src="../../static/shenpi.png"></image>
				<view>审批管理</view>
			</view>
			<view class="gonnb" @click="weishenggl">
				<image class="gntub" src="../../static/mendxx.png"></image>
				<view>卫生管理</view>
			</view>
			<view class="gonnb" @click="gopaiban">
				<image class="gntub" src="../../static/ygpaib.png"></image>
				<view>排班管理</view>
			</view>
			<view class="gonnb">
				<image class="gntub" src="../../static/gzguanl.png"></image>
				<view>工资管理</view>
			</view>
			<view class="gonnb" v-if="dqjs>0" @click="gogonneng('../guijilieb/guijilieb')">
				<image class="gntub" src="../../static/guiji.png"></image>
				<view>员工轨迹</view>
			</view>
			<view class="gonnb" v-if="dqjs>0&&dqjs<5" @click="gogonneng('../myrenwu/myrenwu')">
				<image class="gntub" src="../../static/renwugl.png"></image>
				<view>我的任务</view>
			</view>
			<view class="gonnb" v-if="dqjs>1" @click="gogonneng('../formulateList/formulateList')">
				<image class="gntub" src="../../static/renwugl.png"></image>
				<view>制定任务</view>
			</view>
			<view class="gonnb" v-if="dqjs>1&&dqjs<5" @click="gogonneng('../tuiguang/tuiguang')">
				<image class="gntub" src="../../static/tuiguang.png"></image>
				<view>推广</view>
			</view>
		</view>
		<view class="jinqls" v-if="dqjs==1">
			<view class="biaoxx">
				<view>订单流水</view>
				<view class="chakgd" @click="gozhangd">查看更多>></view>
			</view>
			<view class="zhiflius" v-for="(item,index) in orderFlowData" :key="index">
				<!-- <image class="zhiftb" :src="item.sfklx==0?'../../static/shouk.png':'../../static/fukuan.png'"></image> -->
				<view class="neirxx">
					<view class="nirrr">{{JSON.stringify(item.yexf)=='{}'?'年卡消单':'余额消单'}}</view>
					<view class="fukneir">
						<view class="shour">
							{{item.kehu.name==null||item.kehu.name=='undefind'||item.kehu.name=={}?'张三':item.kehu.name}}
							=> {{item.lfs.name==null||item.lfs.name=='undefind'||item.lfs.name=={}?'李四':item.lfs.name}}
						</view>
						<view class="ddshij">{{item.fuwusj}}</view>
					</view>
				</view>
				<view>
					<view class="yish">{{JSON.stringify(item.yexf)=='{}'?item.nkxf.chishu+"个点":item.yexf.money+"元"}}
					</view>
					<view class="kehu">理发</view>
				</view>
			</view>
		</view>
		<view class="gudong" v-if="dqjs==2">
			<view class="biaoxx">
				<view>员工列表</view>
				<view class="chakgd" @click="gozhangd">查看更多>></view>
			</view>
			<view class="gudongxx" v-for="(item,index) in staffData" :key="index">
				<image class="renwtoux" v-if="item.touxiang==null"
					src="https://img1.baidu.com/it/u=2806775588,1303337175&fm=253&fmt=auto&app=138&f=JPEG?w=711&h=500"
					mode="aspectFill"></image>
				<image class="renwtoux" v-else :src="imgUrl+item.touxiang" mode="aspectFill"></image>
				<view>
					<view class="name">{{item.name==null?'张三':item.name}}</view>
					<view class="touzqink">
						<view>电话：{{item.phone}}</view>
						<view>性别：{{item.sex}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="gudong" v-if="dqjs==3||dqjs==4||dqjs==5">
			<view class="biaoxx">
				<view>门店列表</view>
				<view class="chakgd" @click="gozhangd">查看更多>></view>
			</view>
			<view class="gudongxx" v-for="(item,index) in allData" :key="index">
				<image class="renwtoux" v-if="item.image.length==0"
					src="https://img1.baidu.com/it/u=2806775588,1303337175&fm=253&fmt=auto&app=138&f=JPEG?w=711&h=500"
					mode="aspectFill"></image>
				<image class="renwtoux" v-else :src="imgUrl+item.image[0]" mode="aspectFill"></image>
				<view>
					<view class="name">{{item.mdname}}</view>
					<view class="touzqink">
						<view>员工:{{item.yuangong.length}}</view>
						<view>门店状态：{{item.state}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import qqmapsdk from '@/sdk/qqmap-wx-jssdk.js'
	export default {
		data() {
			return {
				user: null,
				sex: '',
				name: '',
				touxiang: '',
				tongji: null,
				gudong: [],
				dqjs: '',
				mendian_id: '',
				yg_id: '',
				orderFlowData: [], //订单流水数据
				staffData: [], //员工数据
				imgUrl: this.$imgUrl,
				key: 'TFXBZ-WKMK3-QHG3Q-YF7IY-SLEIZ-6CFHQ',
				latitude: '',
				longitude: '',
				province: '广西',
				city: '南宁',
				area: '西乡塘',
				getDataFlag: false,
				allData: [], //所有门店列表数据
				census: {} //统计数据

			}
		},
		onLoad() {
			var that = this;
			uni.getStorage({
				key: 'user_key',
				complete: function(res) {
					// console.log(666,res)
					that.yg_id = res.data.id;
					that.user = res.data;
					that.sex = res.data.sex;
					that.name = res.data.name;
					that.touxiang = res.data.touxiang;
					that.dqjs = res.data.role;
					that.mendian_id = res.data.mendian;
					that.getLocation();
				}
			})
		},
		onShow() {

		},
		onReady() {
			if (this.dqjs == 1) {
				this.getOrderFlowData(this.yg_id)
			}
			if (this.dqjs == 2) {
				//获取，门店下的员工
				this.getStoreData(this.mendian_id)
			}
			if (this.dqjs == 3) {
				//区域获取所有门店
				this.getAreaStoreList()
			}
			if (this.dqjs == 4) {
				//城市获取所有门店
				this.getCityStoreList()
			}
			if (this.dqjs == 5) {
				//老板角色查询所有门店列表
				this.getStoreList();
			}
			//获取首页数据统计
			this.getStatistics()

		},
		methods: {
			toStaff(){
			uni.navigateTo({
				url:'../employees/employees'
			})	
			},
			getStatistics() {
				let _that = this;
				// console.log(333,_that.yg_id)
				uni.request({
					url: getApp().globalData.url + '/client/GetUssytj',
					method: 'GET',
					data: {
						id: _that.yg_id,
					},
					header: {
						"Content-Type": "application/json"
					},
					success: function(res) {
						// console.log(555,res)

						if (res.data.code == 200 && res.data.msg == '查询成功') {
							_that.census = res.data.data;

						} else {
							uni.showToast({
								icon: 'none',
								position: 'center',
								title: "请求出现异常！"
							});
						}
					}
				})
			},
			//老板获取所有的门店列表
			getStoreList() {
				let _that = this;
				uni.request({
					url: getApp().globalData.url + '/client/GetMendian',
					method: 'GET',
					data: {
						latitude: 0,
						longitude: 0
					},
					header: {
						"Content-Type": "application/json"
					},
					success: function(res) {
						// console.log(555,res)
						if (res.data.code == 200 && res.data.msg == '查询成功') {
							let allData1 = res.data.data;
							_that.allData = [];
							if (allData1.length > 11) {
								_that.allData = allData1.splice(10);
							} else {
								_that.allData = allData1;
							}

						} else {
							uni.showToast({
								icon: 'none',
								position: 'center',
								title: "请求出现异常！"
							});
						}
					}
				})
			},
			//市级经理代表获取旗下的所有门店
			getCityStoreList() {
				let _that = this;
				uni.request({
					url: getApp().globalData.url + '/client/GetMendian',
					method: 'GET',
					data: {
						latitude: _that.latitude,
						longitude: _that.longitude,
						city: _that.city
					},
					header: {
						"Content-Type": "application/json"
					},
					success: function(res) {
						// console.log(555, res)
						if (res.data.code == 200 && res.data.msg == '查询成功') {
							let allData1 = res.data.data;
							_that.allData = [];
							if (allData1.length > 11) {
								_that.allData = allData1.splice(10);
							} else {
								_that.allData = allData1;
							}
						} else {
							uni.showToast({
								icon: 'none',
								position: 'center',
								title: "请求出现异常！"
							});
						}
					}
				})
			},
			//区域经理代表获取旗下的所有门店
			getAreaStoreList() {
				let _that = this;
				uni.request({
					url: getApp().globalData.url + '/client/GetMendian',
					method: 'GET',
					data: {
						latitude: _that.latitude,
						longitude: _that.longitude,
						area: _that.area
					},
					header: {
						"Content-Type": "application/json"
					},
					success: function(res) {
						// console.log(555,res)
						if (res.data.code == 200 && res.data.msg == '查询成功') {
							_that.allData = [];
							let allData1 = res.data.data;
							if (allData1.length > 11) {
								_that.allData = allData1.splice(10);
							} else {
								_that.allData = allData1;
							}
						} else {
							uni.showToast({
								icon: 'none',
								position: 'center',
								title: "请求出现异常！"
							});
						}
					}
				})
			},
			//获取定位当前城市
			async getLocation() {
				const QQMapWX = new qqmapsdk({
					key: 'TFXBZ-WKMK3-QHG3Q-YF7IY-SLEIZ-6CFHQ'
				});
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success: (res) => {
						console.log("获取经纬度成功");
						this.latitude = res.latitude;
						this.longitude = res.longitude;
					},
					fail: () => {
						console.log("获取经纬度失败");
					},
					complete: () => {
						// 解析地址
						QQMapWX.reverseGeocoder({
							location: {
								latitude: this.latitude,
								longitude: this.longitude
							},
							success: function(res) {
								console.log("解析地址成功");
								// 省
								let province = res.result.ad_info.province;
								this.province = province;
								// 市
								let city = res.result.ad_info.city;
								this.city = city
								// console.log(province);
								// console.log(city);
							},
							fail: function(res) {
								uni.showToast({
									title: '定位失败',
									duration: 2000,
									icon: "none"
								})
								console.log(res);
							},
							complete: function(res) {
								console.log(res);
								this.area = res.result.address_component.district;
								this.getDataFlag = true;
							}
						})
					}
				})

			},
			//获取，门店下的员工
			getStoreData(id) {
				let _that = this;
				wx.request({
					url: getApp().globalData.url + '/client/GetMendxq',
					method: 'GET',
					data: {
						id: id
					},
					header: {
						"Content-Type": "application/json"
					},
					success: function(res) {
						// console.log(999, res)
						if (res.data.code == 200 && res.data.msg == '查询成功') {
							let vars = res.data.data.yuangong;
							if (vars.length > 11) {
								_that.staffData = vars.splice(10);
							} else {
								_that.staffData = vars;
							}
							// console.log(999, _that.orderFlowData)
						} else {
							uni.showToast({
								icon: 'none',
								position: 'center',
								title: "请求出现异常！"
							});
						}
					}
				})
			},
			//获取员工的订单流水
			getOrderFlowData(lfs_id) {
				// console.log(888, lfs_id)
				let _that = this;
				wx.request({
					url: getApp().globalData.url + '/client/GetLfsddls',
					method: 'GET',
					data: {
						id: lfs_id
					},
					header: {
						"Content-Type": "application/json"
					},
					success: function(res) {
						// console.log(999, res)
						if (res.data.code == 200 && res.data.msg == '查询成功') {
							let vars = res.data.data;
							if (vars.length > 11) {
								_that.orderFlowData = vars.splice(10);
							} else {
								_that.orderFlowData = vars;
							}
							// console.log(999, _that.orderFlowData)
						} else {
							uni.showToast({
								icon: 'none',
								position: 'center',
								title: "请求出现异常！"
							});
						}
					}
				})
			},
			goshaoma() {
				console.log("扫码")
			},
			gogonggxx() {
				console.log("扫码")
			},
			gozhangd() {
				// console.log(999)
			},
			gogonneng(gn) {
				uni.navigateTo({
					url: gn
				})
			},
			goheting() {
				if (this.dqjs == 1) {
					uni.navigateTo({
						url: '../yghet/yghet'
					})
				} else {
					uni.navigateTo({
						url: '../hetonglb/hetonglb'
					})
				}
			},
			weishenggl() {
				if (this.dqjs == 1) {
					uni.navigateTo({
						url: '../weisguanl/myweis'
					})
				} else {
					uni.navigateTo({
						url: '../weisguanl/weisshlb'
					})
				}
			},
			dakakaoqin() {
				if (this.dqjs == 1) {
					uni.navigateTo({
						url: '../punchTheClock/punchTheClock?yg_id=' + this.yg_id //进入打卡页面
					})
				} else if (this.dqjs == 2) {
					uni.navigateTo({
						url: '../yuanglist/yuanglist?mendian_id=' + this.mendian_id, //门店进入员工列表
					})
				} else {
					uni.navigateTo({
						url: '../kaoqlist/kaoqlist' //区经  城市  老板
					})
				}
			},
			gopaiban() {
				if (this.dqjs == 1) {
					uni.navigateTo({
						url: '../mypaiban/mypaiban',
					})
				} else if (this.dqjs == 2) {
					uni.navigateTo({
						url: '../paibanbieo/paibanbieo'
					})
				} else {
					uni.showToast({
						icon: 'none',
						position: 'center',
						title: "您还未拥有排班权限哦！"
					});
					return;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.yhxinxz {
		position: fixed;
		top: 0;
		width: 690rpx;
		z-index: 98;
		background: #fff;
		padding: 50rpx 30rpx 20rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.zuobian {
			display: flex;
			align-items: center;

			.yhtoux {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50rpx;
			}

			.yhneir {
				margin-left: 10rpx;

				.yonghum {
					font-weight: bold;
				}

				.zhiwu {
					padding: 5rpx 20rpx;
					font-size: 26rpx;
					background: #cfbd60;
					color: #37404a;
					border-radius: 30rpx;
					margin-top: 5rpx;
				}
			}
		}

		.xxzx {
			width: 150rpx;
			height: 80rpx;
			// margin-right: 50rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.tishi {
				width: 20rpx;
				height: 20rpx;
				background-color: #ff0000;
				border-radius: 10rpx;
				position: absolute;
				z-index: 11;
				margin-left: 35rpx;
			}

			.uimg {
				width: 50rpx;
				height: 50rpx;
			}
		}
	}

	// 浮动记账图标
	.fudongc {
		position: fixed;
		bottom: 50rpx;
		right: 50rpx;
		z-index: 999;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.jiztub {
			width: 120rpx;
			height: 120rpx;
			border-radius: 60rpx;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			box-shadow: 2rpx 2rpx 10rpx 5rpx #888888;
			background: #ff007f;
			margin-bottom: 10rpx;
			color: #ffffff;
			font-size: 25rpx;

			.tubiao {
				width: 40rpx;
				height: 40rpx;
				margin-bottom: 10rpx;
			}
		}
	}

	// 账目一览
	.zhangmuyil {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		margin-top: 160rpx;

		.zongtouz {
			background: #FF8B8B;
			width: 285rpx;
			padding: 30rpx;
			color: #fffefe;
			border-radius: 20rpx;
			margin-bottom: 20rpx;

			.shuzhi {
				font-size: 40rpx;
				font-weight: bold;
				color: #F9F7F8;
				margin-top: 20rpx;
			}
		}

		.zhyuer {
			background: #F9F7E8;
			width: 285rpx;
			padding: 30rpx;
			color: #439d69;
			border-radius: 20rpx;
			margin-bottom: 20rpx;

			.shuzhi {
				font-size: 40rpx;
				font-weight: bold;
				color: #e7388d;
				margin-top: 20rpx;
			}
		}

		.zongkz {
			background: #61BFAD;
			width: 285rpx;
			padding: 30rpx;
			color: #f2feff;
			border-radius: 20rpx;
			margin-bottom: 20rpx;

			.shuzhi {
				font-size: 40rpx;
				font-weight: bold;
				color: #ffffff;
				margin-top: 20rpx;
			}
		}

		.zshouru {
			background: #E54B4B;
			width: 285rpx;
			padding: 30rpx;
			color: #f2feff;
			border-radius: 20rpx;
			margin-bottom: 20rpx;

			.shuzhi {
				font-size: 40rpx;
				font-weight: bold;
				color: #ffffff;
				margin-top: 20rpx;
			}
		}
	}

	.gongnenglan {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		background: #f0f0f0;
		margin: 20rpx;
		padding: 20rpx;
		border-radius: 20rpx;

		.gonnb {
			width: 120rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 25rpx;
			color: #2C405A;
			margin: 15rpx 6rpx;

			.gntub {
				width: 80rpx;
				height: 80rpx;
				margin-bottom: 5rpx;
			}
		}
	}

	// 股东资金情况
	.gudong {
		padding: 20rpx;

		.biaoxx {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.chakgd {
				color: #55AAFF;
			}
		}

		.gudongxx {
			display: flex;
			align-items: center;
			background: #f0f0f0;
			padding: 20rpx;
			margin-top: 20rpx;
			border-radius: 20rpx;

			.renwtoux {
				width: 80rpx;
				height: 80rpx;
				border-radius: 40rpx;
				margin-right: 10rpx;
			}

			.name {
				font-weight: bold;
				margin-bottom: 5rpx;
			}

			.touzqink {
				display: flex;
				align-items: center;
				width: 560rpx;
				justify-content: space-between;
				font-size: 26rpx;
				color: #3F536E;
			}
		}
	}

	// 近期流水
	.jinqls {
		padding: 20rpx 20rpx 200rpx 20rpx;

		.biaoxx {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.chakgd {
				color: #55AAFF;
			}
		}

		.zhiflius {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 20rpx;
			border-bottom: solid 1rpx #efefef;
			padding-bottom: 20rpx;

			.kehu {
				font-size: 25rpx;
				color: #2C405A;
			}

			.yish {
				font-size: 26rpx;
				color: #007AFF;
				font-weight: bold;
			}

			.weish {
				font-size: 26rpx;
				color: #ff58a3;
				font-weight: bold;
			}

			.zhiftb {
				width: 80rpx;
				height: 80rpx;
			}

			.neirxx {
				width: 500rpx;
				margin-top: 10rpx;

				.nirrr {
					font-weight: bold;
				}

				.fukneir {
					display: flex;
					align-items: center;
					font-size: 25rpx;

					.shour {
						color: #1aafff;
					}

					.zhichu {
						color: #ff2baa;
					}

					.ddshij {
						margin-left: 50rpx;
						color: #848484;
					}
				}
			}
		}
	}
</style>
